<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户管理系统</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			color:#424242;
		}
		#tit{
			margin: 20px 0 0 20px;
		}
		#tit h1{
			color: #0A8;
			font-size: 50px;
		}
		.outside{
			width:1500px;
			height:2px;
			background-color: #0A8;
		}
		#login{
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -150px 0 0 -150px;
			width: 300px;
			height: 330px;
		}
		input{    
		    width: 278px;    
		    height: 18px;    
		    margin-bottom: 10px;    
		    outline: none;    
		    padding: 10px;    
		    font-size: 13px;    
		    color: #0A8;      
		    border: 1px solid #0A8;       
		    border-radius: 10px;  
		    background-color: #fff;         
		}
		#login h1{    
		    color: #0A8;    
		    font-size: 40px;    
		    margin: 20px 20px 10px 110px;    
		}  
	</style>
	<script>
		var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A;-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/; 
		function CheckForm(form) {
			if (form.password.value != form.password_comfirm.value)
				alert("两次密码不一致！");
			else if (form.password.value.length < 6)
				alert("密码太短！");
			else if (!re.test(document.getElementById('Email').value))
				alert("邮箱格式不正确！");
			else return storage();
		}
		function storage() {
			if (!window.localStorage){
				alert("不支持localStorage~");
				return false;
			}else {
				var username = document.getElementById('Username').value;
				var password = document.getElementById('password').value;
				var email = document.getElementById('Email').value;
				var i = (parseInt(localStorage.length/5));
				var ok = 1;
				if (i == 0){
					
					for (var j=0; j<localStorage.length; ++j)
						if (localStorage.getItem(localStorage.key(j)) == username){
							ok = 0;
							alert("用户名已存在！");
							return false;
						}
				}
				alert("注册成功！");
				localStorage.setItem(i+1, username);
				localStorage.setItem("password"+i+1, password);
				localStorage.setItem("email"+i+1, email);
				window.location.href='../第三次作业/work1.html';
				window.event.returnValue= false;		
			}
		}
	$('.see-password').click(function() {
	$('.no-see-password-icon').toggle();
	if ($('#password').attr('type') == 'password') {
		$('#password').attr('type', 'text');
	} else {
		$('#password').attr('type', 'password');
	}
	})
	</script>

</head>
<body bgcolor="#BFE">
	<div id="tit">
		<h1>用户管理系统</h1>
	</div>
	<div class="outside"></div>
	<div id="login">
			<h1>注册</h1>
		<form name="Userform" onsubmit="return CheckForm(this)">
		<p>
			<input type="text" placeholder="用户名" id="Username" name="Username" required="required"></input>
		</p>
		<p>
			<input type="text" placeholder="邮箱" id="Email" name="Email" required="required"></input>
		<p>
			<input type="password" placeholder="密码" id="password" name="password" required="required" ></input>
		</p>
		<p>
			<input type="password" placeholder="确认密码" id="password_comfirm" name="password_comfirm" required="required"></input>
		</p>
		<p>
			<input type="submit" name="SignIn" value="注册" style="height: 45px;width: 300px;font-size: 20px; text-align:center;"></input>
		</p>
		</form>
	</div>

	</body>
</html>